<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="arr"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="username" label="患者姓名" width="80">
      </el-table-column>
      <el-table-column label="就诊卡号" width="120" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.jiuzhen }}</template>
      </el-table-column>
      <el-table-column label="身份证号" width="180" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.shenfenzheng }}</template>
      </el-table-column>
      <el-table-column label="手机号" width="120" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.iphone }}</template>
      </el-table-column>
      <el-table-column prop="guahao" label="挂号科室" width="120">
      </el-table-column>
      <el-table-column prop="type" label="挂号类型" width="100">
      </el-table-column>
      <el-table-column prop="money" label="挂号费" width="80">
      </el-table-column>
      <el-table-column prop="status" label="挂号状态" width="80">
      </el-table-column>
      <el-table-column label="就诊日期" width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column label="就诊时间" width="120">
        <template slot-scope="scope">{{ scope.row.time }}</template>
      </el-table-column>
      <el-table-column label="预约时间" width="120">  <template slot-scope="scope">{{ scope.row. yuyuedate }}</template> </el-table-column>
      <el-table-column label="操作" width="120" show-overflow-tooltip>
        <template slot-scope="scope">
          <i class="el-icon-edit" @click="handleEdit(scope.row)"></i>
          <i
            class="el-icon-s-order"
            @click="handleDelete(scope.row.username)"
          ></i>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { delteById } from "../../../api/home";
export default {
  data() {
    return {
      // tableData: [
      //   {
      //     username: "赵马",
      //     jiuzhen: 500909000,
      //     shenfenzheng: 371890199507070909,
      //     iphone: 15678900988,
      //     guahao: "内科-肾内科",
      //     type: "专家号",
      //     money: 60,
      //     status: "已就诊",
      //     date: "2019-08-18",
      //     time: "9:30",
      //     yuyuedate: "2019-08-18  14:02:26",
      //   },
      // ],
      multipleSelection: [],
    };
  },
  props: ["arr"],

  methods: {
    handleEdit( row){
     this.$emit('openDialog',row)
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleDelete(username) {
    
     delteById({ username: username }).then(res => {
        console.log('删除',res);
        if(res.code==200){
         
          this.$emit('resetable')
        }
      });
    },
  },
};
</script>

<style>
.el-icon-edit {
  font-size: 20px;
  color: blue;
  margin-right: 10px;
}
.el-icon-s-order {
  font-size: 20px;
  color: blue;
}
</style>